<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
    .start{
        width: 75px;
        float: left;
    }
    .form-control{
        height: 28px;
        width: 150px;
        margin-right: 10px;
        float: left;
        line-height: 28px;
        padding: 6px 12px;
    }
    .alert{
        position: absolute;
        display: none;
        z-index: 10;
        width: 30%;
        top: 10%;
        left: 0;
        right: 0;
        margin: auto
    }
    .modal-body p{
        margin: 0;
    }
    .legend{
        z-index: 2;
        width: 130px;
        left: 0;
        right: 0;
        margin: auto;
        position: absolute;
        top: 70px;
        overflow: hidden;
    }
    .legend .legendWrap{
        float: left;
        margin-left: 10px;
    }
    .legend span{
        display: inline-block!important;
    }
    .legend .green{
        background: #5FE79A;
    }
    .legend .red{
        background: #FF5D60;
    }
    .legend .legendBlock{
        vertical-align: text-bottom;
        border-radius: 4px;
        width: 30px;
        height: 15px;
    }
</style>
<body>
    <div class="alert alert-danger alert-dismissible fade in" role="alert">
        <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button> -->
        请求超时
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <!-- <div class="modal-header"> -->
                <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
                <!-- <h4 class="modal-title">Modal title</h4> -->
            <!-- </div> -->
            <div class="modal-body">
                <p style="text-align: center">无可用探针</p>
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div> -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="content">
        <div class="legend">
            <div class="legendWrap">
                <span class="legendBlock green"></span>
                <span class="legendText">通</span>
            </div>
            <div class="legendWrap">
                <span class="legendBlock red"></span>
                <span class="legendText">不通</span>
            </div>
        </div>
        <div id="map" class="map"></div>
        <div class="selectSwap">
            <div class="mark_modl"></div>
            <input class="ipName form-control" type="text" placeholder="ip">
            <button class="start">确定</button>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script>
        $('.container').css('height', window.innerHeight);
        $('.map').css('height', window.innerHeight);
        $('.province').css('height', window.innerHeight);
    </script>
    <!-- <script src="js/data.js"></script> -->
    <script src="js/custormIndex.js"></script>
    <script src="../js/common/dimpt.js"></script>
    <script src="js/jquery.i18n.properties-1.0.9.js"></script>

</body>
</html>